<script setup>
import {ref} from "vue";
// 引入分页组件
import CommonPagination from "@/components/pagination.vue";
import {getUploadedListApi, checkUploadApi, doExportApi} from "@/service/member.js";
// 引入提示
import {ElMessage, ElMessageBox} from 'element-plus';

const pagination = reactive({
  page: 1,
  limit: 15,
  total: 0,
});

// 引入客资上传
import MemberUpload from "./components/member-upload.vue";
// 分配上传
import AllocateUpload from "./components/allocate-upload.vue";

const filterForm = ref({
  city_id: '',
  source_id: '',
  assign_status: '',
  range: []
});

const list = ref([]);
const fetchList = async () => {
  const params = {
    ...filterForm.value,
    pagination: pagination
  };
  const res = await getUploadedListApi(params);
  if (res.code !== 200) {
    // 提示错误信息
    ElMessage.error(res.msg);
    return;
  }

  list.value = res.data.list;
  pagination.total = res.data.pagination.total;
};

// 显示客资上传弹窗
const memberUploadRef = ref(null);
const showUploadDialog = () => {
  // 打开上传弹窗
  memberUploadRef.value.openDialog();
};

import {getSourceTreeApi} from '@/service/source.js';
import {getOpenedCityListApi} from '@/service/zone.js';

const sourceTree = ref([]);
const fetchSourceTree = () => {
  getSourceTreeApi().then(res => {
    sourceTree.value = res.data.tree;
  });
};

const openedList = ref([]);
const fetchOpenedList = () => {
  getOpenedCityListApi().then(res => {
    if (res.code === 200) {
      openedList.value = res.data.list;
    }
  });
};

const handleSearch = () => {
  pagination.page = 1;
  fetchList();
};

const checkUpload = async (row) => {
  const res = await checkUploadApi(row);
  if (res.code !== 200) {
    ElMessage.error(res.msg);
    return;
  }
  ElMessage.success('验证成功');
  fetchList();
};

// 分配上传
const allocateUploadRef = ref(null);
const showAllocateDialog = (row) => {
  allocateUploadRef.value.openDialog(row.id);
};

const doExport = url => {
  const link = document.createElement('a');
  link.style.display = 'none';
  link.href = url;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

// 导出有效客资
const exportEffective = (row) => {
  // 判断行数是否为0
  if (row.effective === 0) {
    ElMessage.error('有效客资为0');
    return;
  }

  // 提醒是否导出有效客资
  ElMessageBox.confirm('是否导出有效客资', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    doExportApi({
      file_id: row.id,
      is_valid: 1
    }).then(res => {
      doExport(res.data.path)
    });
  }).catch(() => {
  });
};

// 导出无效客资
const exportInvalid = (row) => {
    // 判断行数是否为0
    if (row.invalid === 0) {
      ElMessage.error('无效客资为0');
      return;
    }

    // 提醒是否导出无效客资
    ElMessageBox.confirm('是否导出无效客资', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      doExportApi({
        file_id: row.id,
        is_valid: 0
      }).then(res => {
        doExport(res.data.path)
      });
    }).catch(() => {
    });
};

onMounted(() => {
  fetchList();
  fetchSourceTree();
  fetchOpenedList();
});
</script>

<template>
  <el-main>
    <div class="toolbar">
      <el-button type="primary" @click="showUploadDialog">导入</el-button>
      <el-select v-model="filterForm.city_id" placeholder="城市" style="width: 120px">
        <el-option label="全部" value=""></el-option>
        <el-option v-for="item in openedList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
      <el-select v-model="filterForm.assign_status" placeholder="分配状态" style="width: 100px">
        <el-option label="全部" value=""></el-option>
        <el-option label="已分配" value="1"></el-option>
        <el-option label="未分配" value="0"></el-option>
      </el-select>
      <el-cascader v-model="filterForm.source_id" :options="sourceTree"
                   :props="{label:'title', value:'id' ,checkStrictly: true, emitPath: false }" placeholder="渠道"
                   style="width: 200px"></el-cascader>
      <el-date-picker v-model="filterForm.range" type="daterange" range-separator="至" start-placeholder="开始日期"
                      end-placeholder="结束日期" value-format="YYYY-MM-DD" style="max-width: 260px"></el-date-picker>
      <el-button type="primary" icon="search" @click="handleSearch">搜索</el-button>
    </div>
    <el-table class="list" :data="list" border style="width: 100%">
      <el-table-column prop="id" label="编号" align="center" width="100"></el-table-column>
      <el-table-column prop="user.realname" label="操作人"></el-table-column>
      <el-table-column prop="name" label="文件"></el-table-column>
      <el-table-column prop="city.name" label="城市" align="center"></el-table-column>
      <el-table-column prop="source.title" label="渠道" align="center"></el-table-column>
      <el-table-column prop="total" label="总数" align="center"></el-table-column>
      <el-table-column prop="effective" label="有效数" align="center">
        <template #default="{row}">
          <el-link type="primary" @click="exportEffective(row)">{{ row.effective }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="分配状态" align="center">
        <template #default="{row}">
          <span v-if="row.assign_status">已分配</span>
          <span v-else>未分配</span>
        </template>
      </el-table-column>
      <el-table-column prop="invalid" label="重复数" align="center">
        <template #default="{row}">
          <el-link type="danger" @click="exportInvalid(row)">{{ row.invalid }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="create_time" label="上传时间"></el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template #default="{row}">
          <el-button type="primary" size="small" @click="checkUpload(row)">验证</el-button>
          <el-button type="danger" size="small" @click="showAllocateDialog(row)">分配</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <common-pagination :pagination="pagination" @fetch-list="fetchList"/>
    </div>
  </el-main>

  <member-upload ref="memberUploadRef" @reload="fetchList"></member-upload>
  <allocate-upload ref="allocateUploadRef" @reload="fetchList"></allocate-upload>
</template>
